<template>
  <demo-content :title="title">
    <p>
      canvas
      元素实际上有2套尺寸，一个是元素本身的大小，一个是元素绘图表面(drawing
      surface)的大小。
    </p>
    <p>
      设置元素的
      width与height属性时，实际上同时修改了该元素本身的大小与元素绘图表面的大小。
    </p>
    <p>
      使用 CSS 来设置 canvas
      元素大小，与直接设置属性相比，只会改变元素本身大小，不会影响绘图表面。当
      canvas
      元素大小与绘图表面大小不相等时，浏览器会对绘图表面进行缩放，使其符合元素大小。
    </p>
    <p>
      左边的 canvas 元素大小为 300 &times; 300, 绘图表面大小为原始的 300 &times;
      150, 因此导致了文本被纵向拉伸。<br />
      右边的 canvas 元素大小和绘图表面大小都为 300 &times; 300,
      因此没有拉伸现象。<br />
      <strong
        >建议通过 width 与 height 属性而非 CSS 来修改 canvas
        元素的大小。</strong
      >
    </p>
    <p>
      canvas 元素没有提供很多 api，实际上它只提供了两个属性 width /
      height，三个方法 getContext / toDataURL / toBlob。
    </p>

    <p>
      左侧 canvas 的 width = {{ canvasRef?.width }}, height =
      {{ canvasRef?.height }}, style width = {{ csWidth }}, style height =
      {{ csHeight }}，两者并不相等。
    </p>
    <canvas
      ref="canvasRef"
      style="width: 300px; height: 300px; background-color: white"
    ></canvas>
    <canvas
      ref="canvasRef2"
      style="background-color: white"
      width="300"
      height="300"
    ></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const title = "绘图表面大小";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
const csWidth = ref("");
const csHeight = ref("");
const canvasRef2 = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const canvas2 = canvasRef2.value!;
  const context = canvas.getContext("2d")!;
  const context2 = canvas2.getContext("2d")!;
  context.fillText("hello", 0, 10);
  context2.fillText("hello", 0, 10);
  const cs = getComputedStyle(canvas);
  csWidth.value = cs.width;
  csHeight.value = cs.height;
});
</script>

<style src="./default.css" scoped></style>
